<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<style>
			/*控制字体：字体家族属性*/
			{
				/*font-family 指定字体,常用：微软雅黑、宋体..*/
				font-family: 微软雅黑,sans-serif;
				/*用户电脑端可能不存在指定字体，按照顺序指定一个字体
				sans-serif 无衬线字体，理解：黑体
				*/
			   /*字体尺寸属性  px单位：绝对值
			                 em单位:相对与父元素字体大小 倍数【移动端】
			   */
			   font-size: 1.5em;
			   /*字体加粗属性：属性值【数值整数范围：100~900】纯数值   400  等于  normal
			                 属性值【英文：normal、bold】           900  等于  bold
			   */
			   font-weight: 800;
			   /*字体样式属性*/
			   font-style: italic;
			   /*文本转换属性:uppercase转大写、lowercase转小写、capitalize转单词首字母*/
			   text-transform: uppercase;
			   text-transform: lowercase;
			   text-transform: capitalize;
			   /*首行缩进属性*/
			   text-indent: 200px;
			}
			/*2.控制文本属性*/
			h1+p{
				border: 1px solid red;
				/*text-align文本对齐属性：left|right|center【具备宽度空间】
				                        justify【文本内容足够，两端对齐】*/
				text-align: justify;
				/*line-height行高属性：数值px  主要功能：文本垂直居中，高度与行高一致*/
				height: 40px;
				line-height: 40px;
				/*letter-spacing: 数值px    设置字符的间距*/
				left-spacing: 2px;
				/*white-spacing: [正负]数值px    设置单词的间距*/
				word-spacing: 10px;
			}
			/*3.文本装饰效果属性*/
			div a{
				border: 1px solid #ccc;
				padding: 8px;
				margin-left: 5px;
			}
			div a.current{ /*加权重*/
				border:0;
				color: #000;
				/*text-decoration超文本文本装饰属性值： none 去掉下划线
				                                     underline 默认 自带下划线
													 line-through 删除线
				
				*/
				text-decoration: none;
			}
			div p{
				/* 文本阴影属性： 【阴影三种：过滤：下阴影|文本阴影|盒子阴影】*/
				/*             X   Y 模糊程度 颜色*/
				text-shadow: 5px 5px 10px #137dff;
			}
			/*4.处理文本溢出属性*/
			div>span{
				/*white-space文本换行属性：nowrap 不换行
				                         pre 保留空格与换行
										 normal 默认，空格合并，自动换行，回车不管
				*/
				bor der: 1px solid red;
				white-space:nowrap;
				white-space: pre;
			}
		</style>
	</head>
	<body>
		<!-- 文本格式化属性：页面上文本或者字体
		 4种用途 ①控制字体：font-family、font-size、font-weight
		        ②控制文本布局：text-align、line-height、letter-spacing等
				③文本装饰效果：text-decoration、text-shadow等
				④处理文本溢出与换行：overflow、white-space等
		 -->
		<h1>控制字体属性： font-family、font-size、font-weight</h1>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum quidem cupiditate dolore quo, quibusdam, recusandae in magni necessitatibus eum maxime illo similique culpa autem hic quos blanditiis facere asperiores obcaecati.
	    <h1>控制文本布局：text-algin</h1>
		<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur quasi eligendi suscipit eum ad nisi aut aperiam distinctio, ipsam vitae. Unde exercitationem iusto velit quas itaque voluptatem fugit fugiat eius.</p>
	    <h1>文本装饰效果</h1>
		<div>
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<p>文本阴影属性</p>
			</div>
			<h1>处理文本溢出与换行</h1>
			<div>
				<span>L     
				orem ipsum dolor sit amet consectetur, adipisicing elit. Odio nemo vero doloremque, quaerat ut quasi fuga suscipit nihil amet facere dolorum sint alias recusandae praesentium natus ex sequi. Eaque, nihil.
			    </span>
			</div>
	</body>
</html>